<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-button @click="addhouse">新增房型</el-button>
        <el-button @click="bachdelete">批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input class="fangxingmingcheng" v-model="formInline.HouseName" placeholder="房型名称" style="width: 150px">
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table ref="multipleTable" :data="housetypelist" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="houseName" label="房型名称"> </el-table-column>
      <el-table-column prop="housePrice" label="门市价(元)"> </el-table-column>
      <el-table-column prop="houseSecurity" label="押金(元)"> </el-table-column>
      <el-table-column prop="roomNumber" label="房间数量"> </el-table-column>
      <el-table-column prop="gouseRank" label="排序">
        <template slot-scope="scope">
          <el-input v-model="scope.row.gouseRank" style="width: 100px"></el-input>
          <i class="el-icon-edit" @click="updaterank(scope.row.id, scope.row.gouseRank)"></i>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="formInline.pageIndex" :page-sizes="[3, 6, 9, 20]" :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="formInline.count">
    </el-pagination>
    <el-drawer title="房型管理-新增房型" :visible.sync="dialogFormVisibleaddhouse" direction="rtl" custom-class="demo-drawer"
      ref="drawer" size="50%">
      <div class="demo-drawer__content">
        <AddHouseType ref="AddHouseType" @savehousetype="savehousetype" :key="new Date().getTime()"></AddHouseType>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="Save">添加</el-button>
        </div>
      </div>
    </el-drawer>
    <el-drawer title="房型管理-修改房型" :visible.sync="UpdatedialogFormVisibleaddhouse" direction="rtl"
      custom-class="demo-drawer" ref="drawer" size="50%">
      <div class="demo-drawer__content">
        <UpdateHouseType ref="UpdateHouseType" @updatehousetype="updatehousetype" :key="new Date().getTime()"
          :houseid="this.Id"></UpdateHouseType>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="upsave">修改</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- <el-dialog title="新增房型" :visible.sync="dialogFormVisibleaddhouse">
      <AddHouseType
        ref="AddHouseType"
        @savehousetype="savehousetype"
        :key="new Date().getTime()"
      ></AddHouseType>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleaddhouse = false">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import AddHouseType from "./AddHouseType.vue";
import UpdateHouseType from "./UpdateHouseType.vue";
import {
  gethousetypelist,
  Deletehouse,
  BatchDeletehouse,
  Updrankhouse,
} from "@/api/housetype";
export default {
  name: "VueElementAdminFixInstallProblemHouseTypeList",
  components: {
    AddHouseType,
    UpdateHouseType,
  },
  data() {
    return {
      formInline: {
        HouseName: "",
        pageIndex: 1,
        pageSize: 3,
        count: 0,
      },
      Id: 0,
      dialogFormVisibleaddhouse: false,
      UpdatedialogFormVisibleaddhouse: false,
      housetypelist: [],
      pxnumber: 1,
      houseidarr: [],
      gouserank: 0,
    };
  },

  mounted() {
    //页面加载时启动
    this.tohousetype();
  },

  methods: {
    //修改排序
    updaterank(id, houserank) {
      Updrankhouse(id, houserank).then((res) => {
        this.tohousetype();
      });
    },
    //分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.tohousetype();
    },
    handleCurrentChange(val) {
      this.formInline.pageIndex = val;
      this.tohousetype();
    },
    //批量删除
    bachdelete() {
      console.log(this.houseidarr);
      //使用 Element UI 的 MessageBox
      this.$confirm("确定要删除吗？", "确认删除", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 用户点击了确认按钮，执行删除操作
          BatchDeletehouse(this.houseidarr).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "批量删除成功",
                type: "success",
              });
            }
            this.tohousetype();
          });
        })
        .catch(() => {
          // 用户点击了取消按钮，不执行删除操作
        });
    },
    //修改
    handleEdit(id) {
      this.UpdatedialogFormVisibleaddhouse = true;
      this.Id = id;
    },
    updatehousetype() {
      this.UpdatedialogFormVisibleaddhouse = false;
      this.tohousetype();
    },
    upsave() {
      this.$refs.UpdateHouseType.upsaveHouse();
    },
    //删除
    handleDelete(id) {
      //使用 Element UI 的 MessageBox
      this.$confirm("确定要删除吗？", "确认删除", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 用户点击了确认按钮，执行删除操作
          Deletehouse(id).then((res) => {
            if (res.data) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
            this.tohousetype();
          });
        })
        .catch(() => {
          // 用户点击了取消按钮，不执行删除操作
        });
    },
    //查询
    onSubmit() {
      this.formInline.pageIndex = 1;
      this.tohousetype();
    },
    //显示房型
    tohousetype() {
      gethousetypelist(this.formInline).then((res) => {
        this.housetypelist = res.data;
        this.formInline.count = res.count;
      });
    },
    //新增房型
    addhouse() {
      this.dialogFormVisibleaddhouse = true;
    },
    savehousetype() {
      this.dialogFormVisibleaddhouse = false;
      this.tohousetype();
    },
    Save() {
      this.$refs.AddHouseType.saveHouse();
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.houseidarr = [];
      val.forEach((ele) => {
        this.houseidarr.push(ele.id);
      });
    },
  },
};
</script>
<style>
.el-drawer__body {
  overflow: scroll;
}

.demo-drawer__footer {
  float: right;
}
</style>
